<template>
  <view>
    <view ref="uni-rate" class="uni-rate">
      <view
        class="uni-rate__icon"
        :style="{ 'margin-right': marginNumber + 'px' }"
        v-for="(star, index) in stars"
        :key="index"
        @touchstart.stop="touchstart(index)">
        <view style="width: 100%;height: 70rpx;" class="u-center">
          <image class="itmsf" :src="isFill ? 'https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_pingfen.png': 'https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_active_pfs.png'"></image>
        </view>
        <view :style="{ width: star.activeWitch }" class="uni-rate__icon-on u-center">
          <image class="itmsf" src="https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_active_pfs.png"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UniRate',
  props: {
    isFill: {
      // 星星的类型，是否镂空
      type: [Boolean, String],
      default: true
    },
    color: {
      // 星星未选中的颜色
      type: String,
      default: '#f00'
    },
    activeColor: {
      // 星星选中状态颜色
      type: String,
      default: '#ffca3e'
    },
    size: {
      // 星星的大小
      type: [Number, String],
      default: 24
    },
    value: {
      // 当前评分
      type: [Number, String],
      default: 0
    },
    modelValue: {
      // 当前评分
      type: [Number, String],
      default: 0
    },
    max: {
      // 最大评分
      type: [Number, String],
      default: 5
    },
    margin: {
      // 星星的间距
      type: [Number, String],
      default: 0
    },
    touchable: {
      // 是否支持滑动手势
      type: [Boolean, String],
      default: true
    }
  },
  data () {
    return {
      valueSync: '',
      userMouseFristMove: true,
      userRated: false,
      userLastRate: 1
    }
  },
  watch: {
    value (newVal) {
      this.valueSync = Number(newVal)
    },
    modelValue (newVal) {
      this.valueSync = Number(newVal)
    }
  },
  computed: {
    stars () {
      const value = this.valueSync ? this.valueSync : 0
      const starList = []
      const floorValue = Math.floor(value)
      const ceilValue = Math.ceil(value)
      for (let i = 0; i < this.max; i++) {
        if (floorValue > i) {
          starList.push({
            activeWitch: '100%'
          })
        } else if (ceilValue - 1 === i) {
          starList.push({
            activeWitch: (value - floorValue) * 100 + '%'
          })
        } else {
          starList.push({
            activeWitch: '0'
          })
        }
      }
      return starList
    },
    marginNumber () {
      return Number(this.margin)
    }
  },
  created () {
    this.valueSync = Number(this.value || this.modelValue)
    this._rateBoxLeft = 0
    this._oldValue = null
  },
  mounted () {
    setTimeout(() => {
      this._getSize()
    }, 100)
  },
  methods: {
    touchstart (index) {
      this._getRateCount(index)
    },
    _getRateCount (index) {
      const _this = this
      this._getSize(function () {
        _this.valueSync = index + 1
        _this._onChange()
      })
    },
    _onChange () {
      this.$emit('input', this.valueSync)
      this.$emit('update:modelValue', this.valueSync)
      this.$emit('change', {
        value: this.valueSync
      })
    },
    _getSize (fn) {
      uni
        .createSelectorQuery()
        .in(this)
        .select('.uni-rate')
        .boundingClientRect()
        .exec(ret => {
          if (ret) {
            this._rateBoxLeft = ret[0].left
            fn && fn()
          }
        })
    }
  }
}
</script>

<style lang="scss">
.uni-rate {
  display: flex;
  line-height: 1;
  font-size: 0;
  flex-direction: row;
}

.uni-rate__icon {
  position: relative;
  line-height: 1;
  font-size: 0;
  width: 70rpx;
  height: 70rpx;
  background-color: rgba(0,0,0,0.06);
  border-radius: 10rpx;
  overflow: hidden;
}

.uni-rate__icon-on {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  text-align: left;
  height: 70rpx;
}
.itmsf{
  width: 40rpx;
  height: 40rpx;
}
</style>
